<template>
  <view>
    <view class="ok" v-if="ok">
      <image
        src="https://ryb.ruifengcloud.com/imgs/ok.png"
        mode="widthFix"
        class="noi"
      ></image>
      <view class="not">提交成功</view>
    </view>
    <view class="boxs" v-else>
      <view class="title">产品信息</view>
      <view class="common-form-card">
        <u-form>
          <u-form-item label="成分1" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange1"
                :value="index1"
                :range="Params_wp.drugsNameList"
              >
                <view
                  :class="form.drugName1 != '' ? 'picker' : ' picker pickerno'"
                >
                  {{ form.drugName1 != "" ? form.drugName1 : "请选择" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange2"
                :value="index2"
                :range="Params_wp.netContentList"
              >
                <view
                  :class="
                    form.netContent1 != '' ? 'picker' : ' picker pickerno'
                  "
                >
                  {{ form.netContent1 != "" ? form.netContent1 : "请选择" }}
                </view>
              </picker>
              <view class="tr">%</view>
            </div>
          </u-form-item>

          <u-form-item label="剂型" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange99"
                :value="index99"
                :range="Params_wp.dosageNameList"
              >
                <view
                  :class="form.dosageName != '' ? 'picker' : ' picker pickerno'"
                >
                  {{ form.dosageName != "" ? form.dosageName : "请选择" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="特殊指标要求" label-width="100">
            <u-input
              v-model="form.specialIndicatorRequirements"
              input-align="right"
              placeholder="请输入"
              border="none"
            />
          </u-form-item>

          <u-form-item label="订单总量" label-width="100">
            <div class="area">
              <u-input
                v-model="form.totalAmount"
                input-align="right"
                placeholder="请输入"
                border="none"
              />
              <view class="tr" style="margin-top: 7rpx">公斤</view>
            </div>
          </u-form-item>

          <!-- <u-form-item label="是否默认" label-width="100">
            <div class="area">
              <switch :checked="form.defaultFlag" @change="switch1Change" />
            </div>
          </u-form-item> -->
        </u-form>
      </view>
      <view class="common-form-card common-form-card2">
        <u-form>
          <u-form-item label="成分2" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange3"
                :value="index3"
                :range="Params_wp.drugsNameList"
              >
                <view
                  :class="form.drugName2 != '' ? 'picker' : ' picker pickerno'"
                >
                  {{ form.drugName2 != "" ? form.drugName2 : "请选择" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange4"
                :value="index4"
                :range="Params_wp.netContentList"
              >
                <view
                  :class="
                    form.netContent2 != '' ? 'picker' : ' picker pickerno'
                  "
                >
                  {{ form.netContent2 != "" ? form.netContent2 : "请选择" }}
                </view>
              </picker>
              <view class="tr">%</view>
            </div>
          </u-form-item>
        </u-form>
      </view>

      <view class="common-form-card common-form-card2">
        <u-form>
          <u-form-item label="成分3" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange5"
                :value="index5"
                :range="Params_wp.drugsNameList"
              >
                <view
                  :class="form.drugName3 != '' ? 'picker' : ' picker pickerno'"
                >
                  {{ form.drugName3 != "" ? form.drugName3 : "请选择" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="含量" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange6"
                :value="index6"
                :range="Params_wp.netContentList"
              >
                <view
                  :class="
                    form.netContent3 != '' ? 'picker' : ' picker pickerno'
                  "
                >
                  {{ form.netContent3 != "" ? form.netContent2 : "请选择" }}
                </view>
              </picker>
              <view class="tr">%</view>
            </div>
          </u-form-item>
        </u-form>
      </view>

      <view class="title">包装要求</view>
      <view class="common-form-card">
        <u-form>
          <u-form-item label="每个彩印铝箔袋容量" label-width="300">
            <div class="area">
              <picker
                @change="bindPickerChange7"
                :value="index7"
                :range="Params_wp.foilBagCapacityList"
              >
                <view
                  :class="
                    form.foilBagCapacity != '' ? 'picker' : ' picker pickerno'
                  "
                >
                  {{
                    form.foilBagCapacity != "" ? form.foilBagCapacity : "请选择"
                  }}
                </view>
              </picker>
              <!-- <view class="tr">ML</view> -->
            </div>
          </u-form-item>

          <u-form-item label="每箱装袋数" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange8"
                :value="index8"
                :range="Params_wp.bagsPerBoxNumList"
              >
                <view
                  :class="form.bagsPerBox != '' ? 'picker' : ' picker pickerno'"
                >
                  {{ form.bagsPerBox != "" ? form.bagsPerBox : "请选择" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="每袋加说明" label-width="100">
            <div class="area">
              <picker
                @change="bindPickerChange9"
                :value="index9"
                :range="tfList"
              >
                <view class="picker">
                  {{ form.ifInstructions == 1 ? "是" : "否" }}
                </view>
              </picker>
            </div>
          </u-form-item>

          <u-form-item label="N袋装一个彩印铝箔袋" label-width="200">
            <u-input
              v-model="form.bagsPerColorMediumBox"
              input-align="right"
              placeholder="请输入"
              border="none"
            />
          </u-form-item>
          <u-form-item label="特殊形状材质" label-width="100">
            <u-input
              v-model="form.specialBottle"
              input-align="right"
              placeholder="请输入"
              border="none"
            />
          </u-form-item>

          <!-- <u-form-item label="是否默认" label-width="100">
            <div class="area">
              <switch :checked="form.defaultFlag" @change="switch1Change" />
            </div>
          </u-form-item> -->
        </u-form>
      </view>

      <view class="box_height_20"></view>
      <view class="df_1 rbox box_y_center box_x_center">
        <view style="width: 95%; text-align: center" @click="submit"
          >点击确认询价</view
        >
      </view>
    </view>

    <u-picker
      :show="showType"
      :columns="[selectList]"
      keyName="label"
      @cancel="showType = false"
      @confirm="confirmType"
    ></u-picker>
  </view>
</template>

<script>
// 配置信息
import { scParams, wpParams, wpAdd } from "@/config/api.js";
import config from "../../libs/config/config.js";
export default {
  computed: {},
  data() {
    return {
      one: true,
      tfList: ["否", "是"],
      cityList: "",
      areaList: [],
      index1: 0,
      index2: 0,
      index3: 0,
      index4: 0,
      index5: 0,
      index6: 0,
      index7: 0,
      index8: 0,
      index9: 0,
      index10: 0,
      index11: 0,
      index12: 0,
      index13: 0,
      index14: 0,
      index99: 0,
      index: 0, // 当前选择的省份索引
      cityIndex: 0, // 当前选择的城市索引
      areaIndex: 0, // 当前选择的区县索引
      allData: [], // 所有省市区数据
      fileList1: [],
      fileList2: [],
      ok: false,
      showType: false,

      showDate: false,
      showValidityBeginDate: false,
      showValidityEndDate: false,
      form: {
        dosageName: "",
        specialIndicatorRequirements: "",
        totalAmount: 0,
        drugName1: "",
        netContent1: 0,
        drugName2: "",
        netContent2: 0,
        drugName3: "",
        netContent3: 0,
        foilBagCapacity: "",
        bagsPerBox: 0,
        ifInstructions: 0,
        bagsPerColorMediumBox: 0,
        specialBottle: "",
      },
      selectList: [],
      Params_wp: {
        bagsPerBoxNumList: [2], //每箱装袋数
        bagsPerColorMediumBoxNumList: [2], //N袋装一个彩印中盒
        dosageNameList: ["药剂1", "2"], //剂型名称
        drugsNameList: ["222213123", "2"], //原药名称
        foilBagCapacityList: ["2"], //每个彩印铝箔袋容量 g
        netContentList: [2, 2], //含量
      },
    };
  },
  onLoad(e) {
    // this._getDict();
    // if (e.id && e.id != "undefined") {
    //   this.form.id = e.id;
    // }
    this.getwpgetParams();
  },

  methods: {
    async getwpgetParams() {
      await wpParams().then((res) => {
        console.log(res);
        this.Params_wp = res;
      });
    },
    switch1Change: function (e) {
      if (this.form.defaultFlag == 0) {
        this.form.defaultFlag = 1;
      } else {
        this.form.defaultFlag = 0;
      }
      console.log("switch1 发生 change 事件，携带值为", e.detail.value);
    },
    bindPickerChange1(e) {
      console.log(e);
      this.form.drugName1 = this.Params_wp.drugsNameList[e.detail.value];
      console.log(this.form.drugName1);
    },
    bindPickerChange2(e) {
      this.form.netContent1 = this.Params_wp.netContentList[e.detail.value];
    },
    bindPickerChange3(e) {
      this.form.drugName2 = this.Params_wp.drugsNameList[e.detail.value];
    },
    bindPickerChange4(e) {
      this.form.netContent2 = this.Params_wp.netContentList[e.detail.value];
    },
    bindPickerChange5(e) {
      this.form.drugName3 = this.Params_wp.drugsNameList[e.detail.value];
    },
    bindPickerChange6(e) {
      this.form.netContent3 = this.Params_wp.netContentList[e.detail.value];
    },
    bindPickerChange7(e) {
      this.form.foilBagCapacity =
        this.Params_wp.foilBagCapacityList[e.detail.value];
    },
    bindPickerChange8(e) {
      this.form.bagsPerBox = this.Params_wp.bagsPerBoxNumList[e.detail.value];
    },
    bindPickerChange9(e) {
      this.form.ifInstructions = e.detail.value;
    },
    bindPickerChange99(e) {
      this.form.dosageName = this.Params_wp.dosageNameList[e.detail.value];
    },

    bindPickerChange10(e) {
      this.form.bottlePerBox =
        this.Params_wp.bottlePerBoxNumList[e.detail.value];
    },
    bindPickerChange11(e) {
      this.form.ifCup = e.detail.value;
    },
    bindPickerChange12(e) {
      this.form.ifBottleWithWrap = e.detail.value;
    },
    bindPickerChange13(e) {
      this.form.ifBottleWithPaperBox = e.detail.value;
    },

    go(e) {
      uni.navigateTo({
        url: e,
      });
    },

    confirmType(e) {
      this.showType = false;
      this.form.contractId = e.value[0].value;
      this.form.contractName = e.value[0].label;
    },

    submit() {
      let that = this;

      if (!that.form.drugName1) {
        uni.$u.toast("请选择成分1");
        return;
      }
      if (!that.form.netContent1) {
        uni.$u.toast("请选择成分1的含量");
        return;
      }
      if (!that.form.dosageName) {
        uni.$u.toast("请选择剂型");
        return;
      }

      if (!that.form.totalAmount) {
        uni.$u.toast("请填写订单总量");
        return;
      }
      if (!that.form.drugName2) {
        uni.$u.toast("请选择成分2");
        return;
      }
      if (!that.form.netContent2) {
        uni.$u.toast("请选择成分2的含量");
        return;
      }
      if (!that.form.drugName3) {
        uni.$u.toast("请选择成分3");
        return;
      }
      if (!that.form.netContent3) {
        uni.$u.toast("请选择成分3的含量");
        return;
      }
      if (!that.form.foilBagCapacity) {
        uni.$u.toast("请选择每个彩印铝箔袋容量");
        return;
      }
      if (!that.form.bagsPerBox) {
        uni.$u.toast("请选择每箱装袋数");
        return;
      }
      if (!that.form.bagsPerColorMediumBox) {
        uni.$u.toast("请输入N袋装一个彩印铝箔袋");
        return;
      }

      if (that.one) {
        that.one = false;
        wpAdd(that.form).then((res) => {
          console.log(res);
          if (res) {
            uni.$u.toast("提交成功");

            setTimeout(() => {
              that.one = true;
              uni.redirectTo({
                url: "/pages/my/wp_more?id=" + res, // 目标页面的路径
              });
            }, 1500);
          }
        });

        setTimeout(() => {
          that.one = true;
        }, 1500);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f5f7fb;
}
</style>
<style scoped lang="scss">
page {
  background: #f5f7fb;
}

.tr {
  display: block;
  float: right;
  color: #787879;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.line {
  height: 45px;
  font-weight: bolder;
  font-size: 32rpx;
}

.line_line {
  height: 45px;
  border-bottom: 1px solid #eee;
}

.noi {
  width: 342rpx;
  height: auto;
  display: block;
  float: left;
  margin: 340rpx 204rpx 50rpx;
}

.not {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 30rpx;
  color: #414141;
}

::v-deep .u-form-item {
  border-bottom: 1px solid #e9e9e9;
}

::v-deep .u-form-item:last-child {
  border: 0;
}

::v-deep .u-form-item__body__left__content__label {
  span {
    color: #1c2023;
    font-size: 28rpx;
  }
}

.common-form-card {
  margin: 0 0 15rpx;
  width: 100%;
  display: block;
  float: left;
  border-radius: 0;
  box-shadow: none;
}

.select {
  width: 100%;
  float: right;
  text-align: right;
  color: #c0c4cc;
  font-size: 15px;
}

.select .active {
  color: #303133;
}

.upload_box {
  float: right;
  text-align: right;
  align-items: flex-end;
}

.area {
  float: right;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.picker {
  margin: 0 0 5rpx;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10rpx;
}

.pickerno {
  color: rgb(192, 196, 204);
  font-size: 28rpx;
}

.title {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  padding: 25rpx 0 25rpx 25rpx;
  box-sizing: border-box;
  font-size: 36rpx;
  color: #1c2023;
}

.boxs {
  width: 100%;
  height: auto;
  display: block;
  float: left;
}

.df_1 {
  background: #49b9ad;
  color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 20rpx;
  width: 700rpx;
  margin: 60rpx 25rpx 100rpx;
  padding: 0;
  float: left;
}

::v-deep .u-button--primary {
  background: none !important;
  border: 0;
  width: 100% !important;
  padding: 0 !important;
}

.common-form-card2 {
  margin: 30rpx 0 0 0;
}

::v-deep .common-form-card {
  box-sizing: border-box;
}

// ::v-deep .u-form-item__body__right__content__slot{
// 	display:block
// }
.dinput {
  width: 70%;
}
</style>
